<!--
 * @Author: liuy 208378637@qq.com
 * @Date: 2023-12-21 12:47:50
 * @LastEditors: liuy 208378637@qq.com
 * @LastEditTime: 2023-12-22 21:53:06
 * @FilePath: \front\src\views\replaceModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <a-button type="primary" @click="showModal">显示可以替换的老师</a-button>
        <a-modal v-model:open="open" title="可替换老师" @ok="handleOk">
            <div>
            <!-- <template> -->
                <a-table :columns="columns" :data-source="data" bordered>
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.dataIndex === 'name'">
                            <a>{{ text }}</a>
                        </template>
                        <template v-if="column.key === 'operation'">
                            <a-space>
                                <a-button type="primary" @click="replace(record)" >替换</a-button>
                            </a-space>
                        </template>

                    </template>
                    <!-- <template #title>Header</template>
        <template #footer>Footer</template> -->
                </a-table>
            <!-- </template> -->
        </div>
        </a-modal>
    </div>
</template>
<script setup>
import { ref } from 'vue';

const open = ref(false);
const showModal = () => {
    open.value = true;
};
const notShowModal = () => {
    console.log(" notShowModal row: ", line);
    open.value = false;
};

let line = ref({});

const emit = defineEmits(['message']);
// 向父组件传数据
const updateParent = () => {
    console.log(" updateParent row: ", line);
    emit('message', line);
};

const handleOk = e => {
    console.log(e);
    open.value = false;
};

function replace(row) {
    console.log(" replace row: ", row);
    line = row;
    updateParent();
    notShowModal();
}


// 数据
const data = [
    {
        key: '1',
        name: '新老师1',
        organization: 'XMU',
        gender: '男',
    },
    {
        key: '2',
        name: '新老师2',
        organization: 'XMU',
        gender: '女',
    },
];

// 表结构
const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
    },
    {
        title: '单位',
        className: 'column-organization',
        dataIndex: 'organization',
    },
    {
        title: '性别',
        dataIndex: 'gender',
    },
    {
        title: "操作",
        key: 'operation',
    }
];

</script>
<!-- 表格css -->
<style scoped>
th.column-organization,
td.column-organization {
    text-align: right !important;
}
</style>